<template>
  <div id="dsadas" ref="container" class="container" aria-disabled="true">
    <input type="text" />
    <div class="box">{{ 'sad' }}</div>
    <div></div>
  </div>
</template>
<script setup lang="ts">
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'
// 引入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js'
// 导入动画库
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import gsap from 'gsap'
// 导入dat.gui
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as dat from 'dat.gui'

import { onMounted, ref } from 'vue'
import earth from '@/assets/earth.jpg'
import lineImg from '@/assets/条纹.jpg'
const container: any = ref(null)
// 创建性能监视器
const stats = new (<any>Stats)()

// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color('rgb(0,47,167)')

// 创建相机
const camera = new THREE.PerspectiveCamera(
  100,
  window.innerWidth / (window.innerHeight - 1),
  0.1,
  2000
)
// 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。
// 但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
camera.position.set(0, 10, 100)

// // 坐标网格
// const gridHelper = new THREE.GridHelper(
//   1000,
//   100,
//   new THREE.Color('#F7F7F7'),
//   new THREE.Color('#F7F7F7')
// )
// scene.add(gridHelper)

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  precision: 'highp', //着色器精度
  antialias: true //抗锯齿
})
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight - 1)

// 轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement)
orbitControls.update()

function animate() {
  texture2.offset.x += 0.1
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  stats.update()
  orbitControls.update()
}

// 画面尺寸变化
window.addEventListener('resize', () => {
  console.log('尺寸变化')
  // 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。
  camera.aspect = window.innerWidth / (window.innerHeight - 1)
  camera.updateProjectionMatrix()
  //渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight - 1)
  renderer.setPixelRatio(window.devicePixelRatio)
})
// 创建一矩形1
const geometry1 = new THREE.PlaneGeometry(40, 20)
const texture1 = new THREE.TextureLoader().load(earth)
const material1 = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
  map: texture1
})
const plane1 = new THREE.Mesh(geometry1, material1)
plane1.translateY(40)
console.log('geometry1.uv:', geometry1.attributes.uv)
console.log('geometry1.position:', geometry1.attributes.position)

// 自定义顶点UV 只渲染地图的左下角
// const uvs = new Float32Array([0, 0.5, 0.5, 0.5, 0, 0, 0.5, 0])
// geometry1.attributes.uv = new THREE.BufferAttribute(uvs, 2)

// 创建一矩形2
const geometry2 = new THREE.PlaneGeometry(200, 20)
const texture2 = new THREE.TextureLoader().load(lineImg)
texture2.wrapS = THREE.RepeatWrapping //只设置x轴方向阵列(重复)
texture2.repeat.x = 50
// texture.offset.x = 0.5 //偏移量取值0-1。0.5表示偏移整个图片的一半
// texture.offset.y = 0.5
geometry2.rotateX(-Math.PI / 2)
const material2 = new THREE.MeshBasicMaterial({
  // color: 0xff00ff, //使用纹理贴图的时候不要设置颜色，否则样式会混合
  side: THREE.DoubleSide,
  map: texture2
})
const plane2 = new THREE.Mesh(geometry2, material2)

// 创建一个组
const group = new THREE.Group()
group.add(plane1, plane2) //将box添加到父对象中
scene.add(group)

// 创建辅助坐标
const axesHelper = new THREE.AxesHelper(20)
scene.add(axesHelper)

// 页面挂载后渲染
onMounted(() => {
  console.log(container.value)
  container.value?.appendChild(renderer.domElement)
  container.value?.appendChild(stats.domElement) //性能监视器
  animate()
})
</script>
<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: absolute;
}
</style>
